<template>
    <div class="box">
        <ul>
            <li>
                <div class="flex">
                    <span class="title">表名称</span>
                    <el-input size="mini" class="li-input" v-model="chartName" placeholder="请输入图表名称"></el-input>
                </div>
            </li>
            <li>
                <div class="flex">
                    <span class="title">生成条件</span>
                    <div class="target-box" @drop="drop" @dragover="over">
                        <!-- <h3>条件框</h3> -->
                        <Item
                            v-for="item in categoryList"
                            :key="item.id"
                            :itemData="item"
                            inTarget
                            @removeItem="removeItem"
                            :draggable="false"
                            class="item"
                        />
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import Item from './item.vue';
export default {
    components: {
        Item,
    },
    data() {
        return {
            onDrag: {
                dragType: false,
                data: {},
            },
            list: [],
            targetList: [],

            chartName: '',
            categoryList: [],
            dragMap: new Map(),
            categoryMap: new Map(),
            valueList: [],
        };
    },
    watch: {
        dragMap: {
            handler(map) {
                this.categoryList = [];
                map.forEach((item) => {
                    this.categoryList.push(item);
                });
                console.log(map, this.categoryList);
            },
            deep: true,
        },
    },
    mounted() {},

    methods: {
        over(e) {
            e.preventDefault();
        },
        drop(e) {
            e.preventDefault();
            console.log('识别drop');
            const item = JSON.parse(JSON.stringify(this.$store.state.dragItem));
            const { dragClass } = item;
            if (dragClass === 'category') {
                // 类别可多选,用id区分
                if (this.dragMap.has(item.id)) {
                    return false;
                } else {
                    this.dragMap.set(item.id, item);
                }
            } else if (this.dragMap.has(dragClass)) {
                // 如果存在相同单选类型
                this.dragMap.set(dragClass, item);
            } else {
                this.dragMap.set(dragClass, item);
            }
        },
        removeItem(name) {
            let i = null;
            this.targetList.forEach((element, index) => {
                if (element.name === name) i = index;
            });
            this.targetList.splice(i, 1);
        },
    },
};
</script>
<style lang="scss" scoped>
.flex {
    display: flex;
    align-items: center;
    width: 100%;
    height: 30px;
    .title {
        width: 80px;
    }
}
:deep.box {
    width: 100%;
    li {
        line-height: 43px;
        height: 40px;
        // 单边阴影
        box-shadow: 0 5px 5px -5px rgba($color: #000000, $alpha: 0.5);
    }
    .li-input {
        .el-input__inner {
            border: none;
        }
    }
    .item-box {
        margin: 5px;
        width: 110px;
        height: auto;
        min-height: 300px;
        border: 1px solid #b3d8ff;
    }
    .target-box {
        width: 80%;
        margin: 5px;
        height: 40px;
        // border-bottom: 1px solid #ccc;
        // background: lemonchiffon;
        display: flex;
        align-items: center;
        .item {
            // float: left;
        }
    }
}
</style>
